<template>
  <el-container>
    <el-header class="dzy-main-header">
      <div class="btn-group-event">
        <btn-group @btnClickCallback="btnClickCallback"></btn-group>
      </div>
    </el-header>
    <el-main>
      <div class="custom-integralType-container eventImg-container-mar">
        <div class="custom-eventImg-container">
          <img src="~@/assets/img/event.jpg" alt="">
        </div>
      </div>
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogFormVisible"
        class="custom-dialog_style_twoLine"
        :before-close="cancel" :close-on-click-modal="false">
        <el-form :model="formData" label-width="50%" ref="formData" :rules="rules">
          <el-form-item label="上报人：" label-width="30%" :disabled="true" class="el-name">
            <el-checkbox v-model="isAnonymous" class="anonymityCheckbox" border size="medium">匿名</el-checkbox>
            <el-input v-if="isAnonymous" type="password" v-model="formData.reporterName" autocomplete="off"></el-input>
            <el-input v-else v-model="formData.reporterName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上报人电话：" label-width="30%" prop="reporterContact">
            <el-input v-model="formData.reporterContact" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上报时间：" label-width="30%" prop="reportDate">
            <el-date-picker
              v-model="formData.reportDate"
              value-format="timestamp"
              placeholder="选择日期时间"
              :picker-options="dataPickerBeforeTodayOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="事件分类：" prop="eventCategory" label-width="30%" style="margin-bottom: 22px;">
            <div class="block">
              <el-select filterable v-model="formData.eventCategory" placeholder="请选择">
                <el-option v-for="(item,index) in eventCategoryOption"
                  :key="index"
                  :value="item.id"
                  :label="item.valueName"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="选择经纬度：" prop="longitude" class="custom-longla-container">
            <el-input v-model="formData.longitude" :disabled="true" placeholder="经度" ></el-input>
            <el-input v-model="formData.latitude" :disabled="true" placeholder="纬度" ></el-input>
            <el-button type="text" @click="openSimpleMap" style="color: red;">[ 选择 ]</el-button>
          </el-form-item>
          <el-form-item label="" label-width="30%">
          </el-form-item>
          <el-form-item label="发生地点：" prop="happenAddress" label-width="30%">
            <el-input v-model="formData.happenAddress" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="网格：" prop="gridIdArr" label-width="30%">
            <div class="block">
              <el-cascader
                placeholder="请选择"
                :options="treeData"
                filterable
                clearable
                :props="gridProps"
                :show-all-levels="false"
                v-model="formData.gridIdArr">
              </el-cascader>
            </div>
          </el-form-item>
          <el-form-item label="事件描述：" prop="description" label-width="30%" class="custom-textarea-container">
            <el-input type="textarea" v-model="formData.description"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="30%" class="custom-textarea-container">
          </el-form-item>
          <el-form-item label="图片：" class="custom-img-container" style="width:100%">
            <app-upload ref="appUpload" v-model="formData.photoArr" ></app-upload>
          </el-form-item>
          <el-form-item label="" label-width="30%" class="custom-textarea-container">
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog class="dialog-body-mini" :visible.sync="showMap" title="选择经纬度" width="70%" top="8vh" :before-close="mapCancel">
        <edit-map v-if="showMap" :mode="mapMode" @appMapCallback="appMapCallback" :target="mapTarget" ></edit-map>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import AppUpload from '@/components/AppMultiUpload'
import BtnGroup from '@/components/BtnGroup'
import EditMap from '@/components/EditMap'
import {createEvent} from '@/http/EventApi'
import {getAllRegion} from '@/utils/region'
import {validatePhone} from '@/utils/validate'
import {createMapLocation} from '@/http/AppApi'
import {getEventCategory} from '@/data/DictData'
import {getUserInfo, getUserGridTree} from '@/utils/SessionDataUtil'
export default {
  data () {
    return {
      currentSelectedData: [],
      eventCategoryOption: [],
      dialogTitle: '',
      dialogFormVisible: false,
      isAnonymous: false,
      showOnly: false,
      mapHackReset: false,
      showMap: false,
      mapMode: 'simple',
      mapTarget: {},
      formData: {},
      treeData: [],
      rules: {
        reporterContact: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ],
        reportDate: [
          { required: true, message: '请选择上报时间', trigger: 'blur' }
        ],
        eventCategory: [
          { required: true, message: '请选择事件分类', trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: '请选择经纬度', trigger: 'blur' }
        ],
        happenAddress: [
          { required: true, message: '请输入发生地', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请填写事件描述', trigger: 'blur' }
        ],
        gridIdArr: [
          { required: true, message: '请选择网格', trigger: 'blur' }
        ]
      },
      dataPickerBeforeTodayOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      gridProps: {
        checkStrictly: true,
        label: 'name',
        value: 'id'
      }
    }
  },
  components: {
    EditMap,
    BtnGroup,
    AppUpload
  },
  methods: {
    getTreeData () {
      let data = getUserGridTree()
      if (data && data instanceof Array) {
        this.treeData = data
      }
    },
    save () {
      this.$refs['formData'].validate((valid) => {
        if (!valid) {
          this.$alert('请填写正确表单格式', '', {
            confirmButtonText: '确定'
          })
          return ''
        } else {
          let gridIdIndex = this.formData.gridIdArr.length - 1
          let gridData = {}
          gridData.id = this.formData.gridIdArr[gridIdIndex]
          gridData.items = this.treeData
          gridData.isGetAllId = true
          this.formData.gridId = this.formData.gridIdArr[gridIdIndex]
          this.formData.allGridId = getAllRegion(gridData)
          this.formData.isAnonymous = this.isAnonymous ? 1 : 0
          let m = this
          if (this.formData.photoArr) {
            this.formData.photo = this.formData.photoArr.length === 0 ? '' : this.formData.photoArr.join(',')
          }
          this.formData.procsDefKey = '事件直报'
          createEvent(this.formData).then(resp => {
            if (resp.code && resp.code === '200') {
              m.dialogFormVisible = false
              m.$message({
                type: 'success',
                message: '添加成功'
              })
              m.formData = {}
            }
          })
        }
      })
    },
    cancel () {
      this.dialogFormVisible = false
      this.formData = {}
      this.$refs.appUpload.clearFileList()
    },
    btnClickCallback (callbackData) {
      this.getTreeData()
      this.eventCategoryOption = getEventCategory()
      this.formData = {}
      let userInfo = getUserInfo()
      if (userInfo) {
        this.$set(this.formData, 'reporterName', userInfo.name)
        this.$set(this.formData, 'reporterContact', userInfo.phone)
      }
      this.isAnonymous = false
      this.dialogTitle = '新增'
      this.showOnly = callbackData.sohwOnly
      this.dialogTitle = callbackData.dialogTitle
      this.dialogFormVisible = true
    },
    openSimpleMap () {
      this.mapMode = 'simple'
      this.showMap = true
      this.mapHackReset = true
    },
    appMapCallback (appMapInfo) {
      if (appMapInfo.target) {
        let mapLocation = {}
        mapLocation.targetId = appMapInfo.target.targetId
        mapLocation.targetType = appMapInfo.target.targetType
        if (appMapInfo.clearStatus) {
          mapLocation.clearStatus = appMapInfo.clearStatus
        }
        if (appMapInfo.markPosition) {
          mapLocation.longitude = appMapInfo.markPosition.lng
          mapLocation.latitude = appMapInfo.markPosition.lat
        }
        if (appMapInfo.polyPathArr) {
          mapLocation.mapArea = appMapInfo.polyPathArr
          mapLocation.mapColor = appMapInfo.polyColor
          createMapLocation(mapLocation).then(resp => {
            if (resp.code && resp.code === '200') {
              console.log('保存成功')
            }
          })
        }
      }
      if (appMapInfo.lnglat) {
        this.formData.longitude = appMapInfo.lnglat.lng
        this.formData.latitude = appMapInfo.lnglat.lat
      }
      this.mapCancel()
    },
    mapCancel () {
      this.mapHackReset = false
      this.showMap = false
    }
  }
}
</script>

<style scoped>
.anonymityCheckbox{
  position: absolute;
  top: 2px;
  left: 225px;
}
.custom-eventImg-container{
  height: 526px;
}
.custom-eventImg-container img{
  width: 100%;
}
.eventImg-container-mar{
  margin-top: 2%;
}
.btn-group-event{
  width: 90%;
  margin: 0 auto;
}
.custom-dialog_style_twoLine .el-form >>> .custom-img-container .el-form-item__label {
  width: 25%!important
}
.custom-dialog_style_twoLine >>> .el-form .custom-img-container {
  margin-bottom: 0px
}
.custom-dialog_style_twoLine .el-form >>> .custom-img-container .el-form-item__content {
  position: relative
}
.custom-dialog_style_twoLine .el-form >>> .custom-textarea-container {
  margin-bottom: 20px
}
.custom-dialog_style_twoLine .el-form >>> .custom-textarea-container .el-textarea {
  position: relative
}
.custom-dialog_style_twoLine .el-form >>> .el-name .el-form-item__content {
  display: inline-block;
  margin-left: 0!important;
  width: 40%;
}
</style>
